<template>
  <el-row :gutter="10">
    <h2 style="text-align: center; width: 100%;">TodoList</h2>
  </el-row>
  <el-row :gutter="10" justify="center" class="task_input">
      <el-col :span="16">
        <el-input v-model="title" id="newtodo" class="newtodo" placeholder="请输入任务标题"></el-input>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="_addTask" class="btnAdd">新增任务</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="del">
      <el-col :span="8" style="margin-top: 10px;">
        <el-button class="delBtn" type="danger" @click="_remove(taskName.UNDERWAY)">清空所有进行中</el-button>
      </el-col>
      <el-col :span="8" class="col">
        <el-button class="delBtn" type="danger" @click="_remove(taskName.COMPLETED)">清空所有已完成</el-button>
      </el-col>
      <el-col :span="4" class="col">
        <el-button class="delBtn" type="danger" @click="_remove()">清空所有</el-button>
      </el-col>
    </el-row>

</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { addTask } from '../funtions/addTask';
  import type ITask from '../types/ITask';
  import cacheToData from '../funtions/cacheToData'
  import { removeAll, remove } from '../funtions/remove'
  import { useStore } from '../../../store'
  import { usePiniaTodoListStore } from '../../../store/todolist'
  import { UNDERWAYTASKID, COMPLETEDTASKID } from "../constant/taskId"
  import { taskName } from "../enum/taskName"

  //const store = useStore()
  const piniaTodoListStore = usePiniaTodoListStore()
  console.log(piniaTodoListStore);


  const cacheUnderwayTaskData = cacheToData(UNDERWAYTASKID)
  const cacheCompletedTaskData = cacheToData(COMPLETEDTASKID)

  const cacheHasData = cacheUnderwayTaskData.length + cacheCompletedTaskData.length > 0 ? true : false

  let title = ref<string>("")
  const taskData = reactive({
    underwayTaskData: cacheHasData ? <ITask[]>cacheUnderwayTaskData : <ITask[]>[],
    completedTaskData: cacheHasData ? <ITask[]>cacheCompletedTaskData : <ITask[]>[]
  })

  //初始化数据
  //store.commit("todolist/generateTaskData",taskData)
  piniaTodoListStore.generateTaskData(taskData)
  //console.log(store)

  const cacheData = () => {
    return {
      underwayTaskData: <ITask[]>cacheToData(UNDERWAYTASKID),
      completedTaskData: <ITask[]>cacheToData(COMPLETEDTASKID)
    }
  }

  /**
   * 回车添加任务
   */
  onMounted(() => {
    document.addEventListener("keyup",(e) => {
      if(e.key == "Enter"){
        _addTask()
      }
    })
  })

  /**
   * 添加任务
   */
  const _addTask = () => {
    addTask(title.value, taskData)
    //store.commit("todolist/generateTaskData", cacheData())
    piniaTodoListStore.generateTaskData(cacheData())
    title.value = ""
  }

  /**
   * 删除任务
   * @param taskType 任务类型
   */
  const _remove = (taskType?: string) => {
    switch (taskType){
      case taskName.UNDERWAY:
        remove(cacheData(), taskName.UNDERWAY)
        break
      case taskName.COMPLETED:
        remove(cacheData(), taskName.COMPLETED)
        break
      default:
        removeAll(cacheData())
    }
    //store.commit("todolist/generateTaskData", cacheData())
    piniaTodoListStore.generateTaskData(cacheData())
  }

</script>

<style>
.del{
  display: flex;
  justify-content: start;
}
.col{
  margin-left: 10px;
  margin-top: 10px;
}
.delBtn, .btnAdd {
  display: inline-block;
  width: 100%;
}
</style>
